<template>
  <div class="operateCity">
    <div class="ele-title-1">
      <h4>运营城市管理</h4>
    </div>
    <div class="ele-div-1">
      <div><TableColumnGoodsImage :src="serviceImage" :img-size="'100px'" /></div>
      <div>
        <p>{{ serviceName }}</p>
      </div>
    </div>
    <div class="ele-div-keysearch">
      <el-form ref="formData" :model="formData" style="width: 100%">
        <!--        <div class="search-left child-dialog-search" style="width: 70%">-->
        <el-row type="flex">
          <el-col :span="18" style="display:flex;">
            <el-button type="primary" plain @click="resetForm">全部</el-button>
            <city-select ref="citySelect" v-model="formData.address" :is-hide="false" @change="changedAddress" />
            <el-input v-model="formData.cityKeyWords" suffix-icon="el-icon-search" placeholder="输入名称搜素" style="width: 200px;margin-right: 10px" />
            <el-button type="primary" @click="search">确定</el-button>
          </el-col>
          <el-col :span="6" style="display: flex;justify-content: right">
            <el-button type="primary" @click="addCity">增加运营城市</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ele-table">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="正在查询中。。。"
        stripe
        @selection-change="selectChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="省份" prop="province" />
        <el-table-column label="城市" prop="city" />
        <el-table-column label="价格" prop="onlineServerPrice" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--            <el-button
              type="primary"
              plain
              @click="searchHandle(scope.row)"
            >排班查询</el-button>-->
            <el-button
              type="primary"
              plain
              @click="editHandle(scope.row)"
            >编辑</el-button>
            <el-button type="primary" plain @click="cancelHandle(scope.row)">取消运营</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ele-div-footer">
        <div class="footer-left">
          <el-button plain size="small" @click="allSelection">全选</el-button>
          <el-button plain size="small" @click="cancelSelect">取消运营</el-button>
        </div>
        <el-pagination
          background
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="limit"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageSizeChange"
          @current-change="currentPageChange"
        />
      </div>
    </div>
    <!-- 新增门店 -->
    <!--    <el-dialog :visible.sync="dialogVisible" width="80%">
      <div slot="title" class="ele-dialog-title">选择门店</div>
      <div class="ele-div-keysearch">
        <div class="search-left">
          <el-button type="primary" plain>全部</el-button>
          <el-select v-model="form.province">
            <el-option value="1" label="省" />
          </el-select>
          <el-select v-model="form.city">
            <el-option value="1" label="市" />
          </el-select>
          <el-select v-model="form.area">
            <el-option value="1" label="区" />
          </el-select>
        </div>
        <div class="search-right search-flex">
          <div class="ele-input">
            <el-input v-model="form.orderID" suffix-icon="el-icon-search" />
          </div>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
      <div class="ele-table">
        <el-table :data="BindData" stripe>
          <el-table-column style="selection" />
          <el-table-column label="门店ID" prop="" />
          <el-table-column label="门店名称" prop="" />
          <el-table-column label="门店地址" prop="" />
          <el-table-column label="联系方式" prop="" />
          <el-table-column label="营业时间" prop="" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                @click="addOrder(scope)"
              >增加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-div-footer">
          <div class="footer-left">
            <el-button plain size="small" @click="allSelection">全选</el-button>
            <el-button plain size="small">添加</el-button>
            <el-button plain size="small">新增门店</el-button>
            <el-button plain size="small">刷新列表</el-button>
          </div>
          <el-pagination
            class="pagination-right"
            :page-sizes="[15, 20, 25, 30]"
            :page-size="15"
            :total="400"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>/** 关联门店管理 */
import { cancleOnlineServiceCity, onlineServiceCityList } from '@/api/service'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
import CitySelect from '@/components/CitySelect' // Secondary package based on el-pagination

export default {
  name: 'OperateCity',
  components: { TableColumnGoodsImage, CitySelect },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      list: [],
      listLoading: true,
      total: 0,
      page: 1,
      limit: 10,
      cityKeyWords: '',
      id: null,
      serviceImage: '',
      serviceName: '',
      dialogVisible: false,
      selectList: [],
      formData: {
        allCity: true,
        address: {
          province: null,
          city: null,
          village: null
        },
        cityKeyWords: null
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      /* const params = this.$route.query*/
      const params = this.$dd(this.$route.query.p)
      console.log(params)
      this.id = params.id
      this.serviceImage = JSON.parse(params.serviceImage)[0]
      this.serviceName = params.name
      /* this.id = this.$route.query.id
      this.serviceImage = this.$route.query.serviceImage
      this.serviceName = this.$route.query.serviceName*/
      this.loadTableData()
    },
    resetForm() {
      const vm = this
      vm.$refs.formData.resetFields()
      vm.$refs.citySelect.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this
      vm.reloadTableData()
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.$refs.formData.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.$refs.formData.validate((valid) => {
        if (valid) {
          vm.loadTableData()
        }
      })
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.list = []
      vm.loadTableData()
    },
    /* changedAllCity() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.$refs.citySelect.resetFields()
      }
    },*/
    changedAddress() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.formData.allCity = false
      } else {
        vm.formData.allCity = true
      }
    },
    loadTableData() {
      const data = {
        serviceId: this.id,
        serviceCity: {
          shengId: null,
          sheng: null,
          shiId: null,
          shi: null
        },
        page: this.page,
        limit: this.limit
      }
      if (this.formData.address.province) {
        data.serviceCity.shengId = this.formData.address.province.code
        data.serviceCity.sheng = this.formData.address.province.name
      }
      if (this.formData.address.city) {
        data.serviceCity.shiId = this.formData.address.city.code
        data.serviceCity.shi = this.formData.address.city.name
      }
      if (this.formData.cityKeyWords) {
        data['cityKeyWords'] = this.formData.cityKeyWords
      }
      this.listLoading = true
      onlineServiceCityList(data).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.listLoading = false
        console.log(this.list)
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    /** 增加运营城市 */
    addCity() {
      this.$router.push({ name: 'priceSetting', query: { p: this.$ed({ serviceid: this.id, serviceImage: this.serviceImage, serviceName: this.serviceName }) }})
    },
    /** 编辑 */
    editHandle(row) {
      this.$router.push({ name: 'priceSetting', query: { p: this.$ed({ id: row.id, serviceid: this.id, serviceImage: this.serviceImage, serviceName: this.serviceName }) }})
    },
    /** 排班查询 */
    /* searchHandle(row) {
      this.$router.push({
        name: 'countService',
        query: {
          cityid: row.cityId,
          city: row.city,
          provinceid: row.provinceid,
          province: row.province,
          departmentId: row.departmentId,
          departmentName: row.departmentName,
          serviceid: this.serviceid,
          serviceName: this.serviceName
        }
      })
    },*/
    /** 取消运营 */
    cancelHandle(row) {
      const idList = [row.id]
      cancleOnlineServiceCity(idList).then(response => {
        this.resetForm()
        console.log(response.data.data)
      })
    },
    /** 全选 */
    allSelection() {
      this.$refs.elTable.toggleAllSelection()
    },
    // 表格单选触发
    selectChange(row) {
      row.forEach(element => {
        this.selectList.push(element.id)
      })
    },
    /** 取消运营*/
    cancelSelect() {
      if (this.selectList && this.selectList.length === 0) {
        this.$message.error('未选择行')
      } else {
        cancleOnlineServiceCity(this.selectList).then(response => {
          this.resetForm()
          this.$message.success(
            '取消成功'
          )
        }).catch(() => {
          this.$message.success(
            '取消异常'
          )
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.operateCity {
  padding: 0px 20px;
  p {
    margin: 0;
    padding: 0;
  }
  .ele-title-1 {
    p {
      color: gray;
      margin-top: -10px;
      font-size: 0.95rem;
    }
  }
  .ele-div-1 {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 40px 0px;
    div:first-child {
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    div:last-child {
      p {
        font-size: 0.95rem;
        padding: 10px 10px;
      }
    }
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      ::v-deep.el-select,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
      ::v-deep.el-select {
        width: 100px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
}

</style>
